<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
		<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
		<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap-theme.min.css">
		<script src="jquery-3.6.0.min.js"  type="text/javascript"> </script>
		<script type="text/javascript" src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container-fluid">
		<div class="row"></div>
		</div>
		<div class="col-md-7 table-responsive" >
		<table class="table table-hover table-condensed table-bordered table-condensed" >
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>身份证号</th>
					<th>房间号</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr class="danger">
					<th>1</th>
					<th>张三</th>
					<th>男</th>
					<th>15489484151</th>
					<th>452</th>
					<th><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">修改</button>
						<button type="button" class="btn btn-danger"  data-toggle="modal" data-target="#myModal">
						 删除
						</button>
						</th>
				</tr>
				<tr class="info">
					<th>2</th>
					<th>李四</th>
					<th>男</th>
					<th>1548944545</th>
					<th>895</th>
					<th>
						
						<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">修改</button>
						<button type="button" class="btn btn-danger"  data-toggle="modal" data-target="#myModal">
						 删除
						</button>
						
						</th>
				</tr>
				<tr class="warning">
					<th>3</th>
					<th>Lisa</th>
					<th>女</th>
					<th>15488515154</th>
					<th>356</th>
					<th>
						<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">修改</button>
						<button type="button" class="btn btn-danger"  data-toggle="modal" data-target="#myModal">
						 删除
						</button>
						</th>
				</tr>
				<tr class="success">
					<th>4</th>
					<th>丹奎</th>
					<th>男</th>
					<th>15648451561</th>
					<th>451</th>
					<th>
						<button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#exampleModal">修改</button>
						<button type="button" class="btn btn-danger"   data-toggle="modal" data-target="#myModal">
						 删除
						</button>
					</th>
				</tr>
				<tr >
					<th>5</th>
					<th>达尔</th>
					<th>女</th>
					<th>1515151511</th>
					<th>561</th>
					<th>
						<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">修改</button>
						<button type="button" class="btn btn-danger"  data-toggle="modal" data-target="#myModal">删除</button>
					</th>
			</tbody>
		<div>
			<!-- 模态框：实现顾客信息的展示与修改-->
			<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			    <div class="modal-dialog" role="document">
			        <div class="modal-content">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
			                        aria-hidden="true">&times;</span></button>
			                <!-- 编辑界面的标题-->
			                <h4 class="modal-title" id="exampleModalLabel"
			                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">编辑顾客信息</h4>
			            </div>
			            <div class="modal-body">
			                <!-- 表单（输入组件），从添加复制过来，改一改 -->
			                <form action="/SelectCourse2/teacher/update" method="post" id="myForm">
			                    <!-- 序号，也就是主键ID,修改的时候一定要有这个，并且要设置为不可编辑（readonly）-->
			                    <div class="form-group">
			                        <label for="username">序<span
			                                style="color:transparent;user-select: none;">隐藏</span>号：</label>
			                        <input type="text" class="form-control" name="userId" id="userId">
			                    </div>
			                    <!-- 姓名 -->
			                    <div class="form-group">
			                        <label for="nickname">姓<span
			                                style="color:transparent;user-select: none;">隐藏</span>名：</label>
			                        <input type="text" class="form-control" name="nickname" id="nickname" placeholder="请输入姓名">
			                    </div>
			                    <!-- 性别：单选按钮-->
			                    <div class="form-group">
			                        <label for="nickname">性<span
			                                style="color:transparent;user-select: none;">隐藏</span>别：</label>
			                        <div class="radio">
			                            <label>
			                                <input type="radio" name="gender" id="optionsRadios1" value="男">
			                                男
			                            </label>
			                            &nbsp;&nbsp;
			                            <label>
			                                <input type="radio" name="gender" id="optionsRadios2" value="女">
			                                女
			                            </label>
			                        </div>
			                    </div>
			                    <!-- 身份证号-->
			                    <div class="form-group">
			                        <label for="phone">身份证号：</label>
			                        <input type="text" class="form-control" name="phone" id="phone" placeholder="请输入身份证号">
			                    </div>
								<!-- 房号-->
								<div class="form-group">
								    <label for="username">房间号：</label>
								    <input type="text" class="form-control" name="username" id="username">
								</div>
								<div><button  type="button" onclick=" ">保存</button></div>
								<div class="modal-footer">
								  <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
								  <button type="button" class="btn btn-primary">取消</button>
								</div>
			                </form>
		</div>
		<!-- 删除Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">|温馨提示</h4>
		      </div>
		      <div class="modal-body">
		        确认要删除吗？
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
		        <button type="button" class="btn btn-primary">取消</button>
		      </div>
		    </div>
		  </div>
		</div>
		</table>
	</body>
</html>
